@keyframes traffic{
	0%{
		color: red;
	}
	50%{
		color: yellow;
	}
	100%{
		color: green;
	}
}

button:hover{
	animation: traffic 5s ease-in 1s;
	animation-play-state: running;
	animation-fill-mode: forwards;
}

button:click{
	animation-name:traffic;
	animation-duration: 5s;
	animation-timing-function: ease-in;
	animation-delay: 1s;
	animation-iteration-count:infinite;
	animation-direction: alternate-reverse;
	animation-fill-mode: backwards;
}
